<template>
  <div class='userSelect'>
    <el-select
        v-bind="attrs"
        v-model="showValue"
        filterable
        remote
        reserve-keyword
        remote-show-suffix
        :remote-method="remoteMethod"
        :loading="loading"
    >
      <el-option :key="user.userId" v-for="(user,index) in options" :label="user.userName" :value="user.userId">
        {{ user.userName }}
        <el-divider direction="vertical"></el-divider>
        {{ user.userId}}
      </el-option>
    </el-select>
  </div>
</template>
<script setup name="UserSelect">
import {
  selectEmits,
  selectMixin,
  selectProps
} from '@/components/EbComponent/Selector/selectMixin'
import {listUser} from "@/api/system/user.js";

const props = defineProps({
  ...selectProps(),
})
const emit = defineEmits([...selectEmits()])
const {ready, loading, options, showValue, remoteMethod, attrs} = selectMixin(
    props, {
      emit,
      idKey: 'userId',
      nameKey: 'userName',
      dataKey: 'rows',
      api: listUser
    });
</script>
<style scoped lang='scss'>
.userSelect {
}
</style>
